<template>
  <div class="wrap">
    <ul class="list" v-if="suggests.length">
      <li class="list-item"
        v-for="item in suggests"
        :key="item.key"
        @click="onClick(item.value)"
      >
        <span class="suggest-item" v-html="item.name"></span>
      </li>
    </ul>
</div>
</template>

<script>
export default {
  name: 'SearchSuggest',
  props: {
    suggests: {
      type: Array
    }
  },
  methods: {
    onClick (value) {
      this.$emit('suggest-click', value)
    }
  }
}
</script>
<style lang="scss">
  .suggest-item .suggest_high_light{
    color: $theme-color;
    font-style: normal;
  }
</style>
<style lang="scss" scoped>
  .wrap {
    background-color: $color-grey;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      transform: translate3d(0, 0, 0);
      background-color: $color-grey;
    }
    .list{
      padding-left: rem(10px);
      &-item{
        display: flex;
        align-items: center;
        height: rem(44px);
        @include border1px(#ccc, 0 0 1px);
        font-size: rem(14px);
        color: $color-text-regular;
        .fa{
          color: $color-text-secondary;
          margin-right: rem(5px);
        }
      }
    }
  }
</style>
